﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>我们结婚啦</title>
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />

    <meta property="og:type" content="website" />
    <meta property="og:title" content="我YAO结婚啦!!!">
    <meta property="og:description" content="页面描述页面描述页面描述">
    <meta property="og:image" content="http://wedding.ggten.com/images/headimg.jpg">
    <meta property="og:url" content="http://wedding.ggten.com">


    <link rel="stylesheet" href="__STATIC__/css/swiper.min.css">
    <link rel="stylesheet" href="__STATIC__/css/animate.min.css">
    <script src="__STATIC__/js/swiper.min.js"></script>
    <script src="__STATIC__/js/swiper.animate.min.js"></script>
    <link href="__STATIC__/css/index.css" rel="stylesheet" />
    <style>

    </style>

    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script>
        var bjyy=document.getElementById("yy");
        function autoPlayAudio() {
            wx.config({
                debug: false
            });
            wx.ready(function() {
                bjyy.play();
            });
        }
        autoPlayAudio();
    </script>
    <style>
        .hide{
            display: none;
        }
    </style>

    <link rel="stylesheet" type="text/css" href="__STATIC__/wall/reset.css" tppabs="http://down.admin5.com/demo/code_pop/19/579/css/reset.css">
    <link rel="stylesheet" type="text/css" href="__STATIC__/wall/index.css" tppabs="http://down.admin5.com/demo/code_pop/19/579/css/index.css">
    <script type="text/javascript" src="__STATIC__/wall/jquery-1.10.2.js" tppabs="http://down.admin5.com/demo/code_pop/19/579/js/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="__STATIC__/wall/jquery-ui-1.10.2.custom.js" tppabs="http://down.admin5.com/demo/code_pop/19/579/js/jquery-ui-1.10.2.custom.js"></script>
    <script type="text/javascript" src="__STATIC__/wall/index.js" tppabs="http://down.admin5.com/demo/code_pop/19/579/js/index.js"></script>
</head>
<body>
    <!--背景音乐-->
    <audio id="music" loop="loop" style="display: none;"></audio>
    <!--音乐按钮-->
    <div id="btn-music"style="position: absolute;z-index: 1000;right: 15px;top:10px;"  >
        <img src="__STATIC__/images/play.png" alt="" id="btn-music-on" style="width: 25px;height: 25px"/>
        <img src="__STATIC__/images/pause.png" alt="" id="btn-music-off" class="hide" style="width: 25px;height: 25px" />
    </div>
    <div style="position: absolute;z-index: 1000;right: 15px;top:50px;"  onclick="show_div('photo')">
        <img src="__STATIC__/images/photo.png" alt=""  style="width: 25px;height: 25px"/>
    </div>
    <div style="position: absolute;z-index: 1000;right: 12px;top:90px;"  onclick="show_div('liuyan')">
        <img src="__STATIC__/images/liuyan.png" alt=""  style="width: 30px;height: 30px"/>
    </div>

    <div style="position: absolute;z-index: 1000;right: 15px;top:140px;"  onclick="show_div('ditu')">
        <img src="__STATIC__/images/ditu.png" alt=""  style="width: 25px;height: 25px"/>
    </div>
    <script>
        var c = document.getElementById("music");
        c.src = "__STATIC__/music/give_you.mp3";
        c.play();
        //处理微信的时候
        document.addEventListener("WeixinJSBridgeReady", function(){
            if(typeof WeixinJSBridge == "object"){
                WeixinJSBridge.invoke("getNetworkType", {}, function(j){
                    c.play();
                })
            }
        });
        music_state = 1;
        //音乐按钮
        $("#btn-music").on("click", function(){
            if(music_state){
                c.pause();
                music_state = 0;
                $("#btn-music-off").removeClass("hide");
                $("#btn-music-on").addClass("hide");
            }else{
                c.play();
                music_state = 1;
                $("#btn-music-on").removeClass("hide");
                $("#btn-music-off").addClass("hide");
            }
        });

    </script>

    <div class="swiper-container" >
        <div class="swiper-wrapper">

            <div id="first" class="swiper-slide">
                <div class="imgbox">
                    <img src="__STATIC__/show/first.jpg" />
                    <div class="welcome">
                        <div class="names">
                            郭忠杰&林艳丽
                        </div>
                        <div class="words">
                            <div class="wedding ani resize" style="top: 5px;" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s">
                                2019.02.25
                            </div>
                            <div class="wedding ani resize" style="top: 22px;" swiper-animate-effect="bounceInDown" swiper-animate-duration="0.5s" swiper-animate-delay="1s">
                                我们要结婚啦!
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="swiper-slide"  >
                <div class="imgbox">
                    <!-- <img class="xzAni" src="show/p1.jpg" /> -->
                    <img class="xzAni" src="__STATIC__/show/p1.png" />
                    <div class="circle" style="width: 150px; height: 150px; top: 20px; left: 5px;"></div>
                    <div class="circle fast" style="width: 100px; height: 100px; top: 120px; right: 5px;"></div>
                    <div class="circle" style="width: 100px; height: 100px; top: 120px; left: 5px;"></div>
                    <div class="circle fast" style="width: 100px; height: 100px; top: 220px; right: 35px;"></div>
                    <div class="circle fast" style="width: 120px; height: 120px; top: 320px; left: 15px;"></div>
                    <div class="circle" style="width: 150px; height: 150px; bottom: 20px; left: 5px;"></div>
                    <div class="txtwarper ani resize" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay=".5s">
                        <img src="__STATIC__/show/lian.png" />
                    </div>
                </div>
            </div>
            <div class="swiper-slide" >
                <div class="imgbox">
                    <img class="xzAni" src="__STATIC__/show/p2.png" />
                    <div class="circle" style="width: 150px; height: 150px; top: 50px; left: 5px;"></div>
                    <div class="circle fast" style="width: 100px; height: 100px; top: 120px; right: 5px;"></div>
                    <div class="txtwarper ani resize" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay=".5s">
                        <img src="__STATIC__/show/er.png" style="height: 150px;width:150px;display: inline-block;" />
                    </div>
                </div>
              
            </div>
            <div class="swiper-slide"  >
                <div class="imgbox">
                    <img id="qzinimg" class="qzin" src="__STATIC__/show/p3.png" />
                    <div class="circle" style="width: 150px; height: 150px; top: 20px; left: 5px;"></div>
                    <div class="circle fast" style="width: 100px; height: 100px; top: 120px; right: 5px;"></div>
                    <div class="circle fast" style="width: 120px; height: 120px; top: 320px; left: 15px;"></div>
                    <div class="txtwarper ani resize" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="5s">
                        <img src="__STATIC__/show/er.png" style="height: 150px;width:150px;display: inline-block;" />
                    </div>
                </div>
            </div>
            <div class="swiper-slide" id="page4">
                <div class="imgbox horizontal">
                    <img class="moveX" src="__STATIC__/show/p4.png" style="width: 788px;height: 541px"/>
                    <div class="txtwarper ani resize" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay=".5s">
                        <img src="__STATIC__/show/zhi.png" style="height: 200px;width: 200px;display: inline-block;" />
                    </div>
                </div>
            </div>
            <div class="swiper-slide" id="page5">
                <div class="imgbox">
                    <img class="xzAni" src="__STATIC__/show/p5.png" />
                    <div class="circle fast" style="width: 100px; height: 100px; top: 120px; right: 5px;"></div>
                    <div class="circle" style="width: 100px; height: 100px; top: 120px; left: 5px;"></div>
                    <div class="circle fast" style="width: 120px; height: 120px; top: 320px; left: 15px;"></div>
                    <div class="circle" style="width: 150px; height: 150px; bottom: 20px; left: 5px;"></div>
                    <div class="txtwarper ani resize" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay=".5s">
                        <img src="__STATIC__/show/shen.png" style="height: 200px;width: 200px;display: inline-block;" />
                    </div>
                </div>
            </div>
            <div id="last" class="swiper-slide">
                <div class="imgbox" style="height: 90vh">
                    <div class="info">
                        郭忠杰&林艳丽<br />
                        2019年02月25日 11:00<br />
                        厦门市海沧区<br />
                        囷瑶村石岑社
                        <div style="font-weight: bold;">诚邀您的见证与祝福!</div>
                    </div>

                    <div class="butons">
                        <a href="tel:18860054717" class=" btn">联系新郎</a>
                        <a href="tel:13696900602" class=" btn">联系新娘</a>
                    </div>
                </div>

            </div>
            
        </div>
        <img src="__STATIC__/images/upArrow.png" id="array" class="resize" />
    </div>

    <!-- 场景六 -->
    <div class="six-box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>

    <!-- 场景七祝福墙内容 -->
    <div class="seven-box" style="display: none">
        <img id="blessing-return" class="u-return" src="btn_return.png" tppabs="http://down.admin5.com/demo/code_pop/19/579/images/btn_return.png"/>
        <div class="clickMe"><img src="__STATIC__/wall/clickMe.png" style="width: 100px;height: 150px;    ">
            <span style="position: absolute;color: #ebd7d7;left:18px;top:80px;z-index: 10000;font-size: 20px;">送祝福</span></div>
        <div class="seven-content">
            <!--<?php-->
                <!--include ('__STATIC__/db.php');-->
                <!--$sql="select *, FROM_UNIXTIME(add_time, '%Y-%m-%d %H:%i:%S') add_time  from wall";-->
                <!--$data=$link->query($sql);-->
              <!--/*  $data=$res->fetch_all();*/-->
            <!--?>-->
            
<!--            <div class="note-a1"></div>-->
<!--            <div class="note-a2"></div>-->
<!--            <div class="note-a3"></div>-->
<!--            <div class="note-a4"></div>-->
<!--            <div class="note-a5"></div>-->
            <!--<div class="note-a6"></div>
            <div class="note-a7"></div>
            <div class="note-a8"></div>
            <div class="note-a9"></div>
            <div class="note-a10"></div>
            <div class="note-a11"></div>
            <div class="note-a12"></div>-->
            <!--<div class="note-1">一定要幸福哦~</div>-->
            <!--<div class="note-2">祝你们白头偕老！</div>-->
            <!--<div class="note-3">早生贵子~</div>-->
            <!--<div class="note-4">新婚快乐~</div>-->
            <!--<?php-->
                <!--foreach ($data as $k => $v)-->
                <!--{-->
                    <!--$s=rand(1,6);-->
                    <!--echo " <div class=\"note-$s\" id='wall_".$v['id']."' onclick=\"show_info('".$v['content']."','".$v['name']."','".$v['add_time']."','$s')\">".$v['content']."</div>";-->
                <!--}-->
            <!--?>-->
<!--            <div class="note-5">纳尼</div>-->
            <!--<div class="note-5">生个宝宝认我做干妈！</div>-->
            <!--<div class="note-6">喜结良缘O(∩_∩)O哈哈哈~</div>-->
            <!--<div class="note-1">一定要幸福哦~</div>-->
            <!--<div class="note-2">祝你们白头偕老！</div>-->
            <!--<div class="note-3">早生贵子~</div>-->
            <!--<div class="note-4">新婚快乐~</div>-->
            <!--<div class="note-5">生个宝宝认我做干妈！</div>-->
            <!--<div class="note-6">喜结良缘O(∩_∩)O哈哈哈~</div>-->
            <!--<div class="note-6">喜结良缘O(∩_∩)O哈哈哈~</div>-->
            <!--<div class="note-6">喜结良缘O(∩_∩)O哈哈哈~</div>-->
            <!--<div class="note-6">喜结良缘O(∩_∩)O哈哈哈~</div>-->
        </div>
    </div>
    <!-- 遮罩层 -->
    <div class="mask"></div>
    <div class="pop-box">
        <h1>送上祝福语<span style="position: absolute;top:-3px;right:8px;" onclick="hidd();">X</span></h1>
        <textarea id="write" maxlength="100" >写上您的祝福吧~</textarea>
        <input type="text" id="name" placeholder="您的大名" value="" maxlength="20">
        <div class="u-sure" id="uSure">确定</div>
    </div>

    <!-- 遮罩层留言详情 -->
    <div class="mask_info"></div>

    <div class="info-box">
        <div  style="position: absolute; right:18%;bottom:85px"> <span style="font-size:15px;font-weight:bold">from:</span> <span id="user" style="font-size: 20px">asdfasdfasdfasdfasdfasdfasd</span></div>
        <h1><span style="position: absolute;top:-3px;right:8px;color: #6f6b6b" onclick="hidd_info();">X</span></h1>
        <div id="content" ></div>

        <div id="add_time" style="float: right;margin-right: 8%;font-size: 15px;">2018-10-10 15:44:55</div>
<!--        <input type="text" id="name" placeholder="您的大名" value="">-->
<!--        <div class="u-sure" id="uSure">确定</div>-->
    </div>
    <div class='ditu' style="display: none">
        <iframe src="__STATIC__/iii.html" style="width: 100%;height: 900px"></iframe>
    </div>


    <script>
        function show_div(re)
        {

            if(re=='photo')
            {
                $(".ditu").css('display','none');
                $(".seven-box").css('display','none');
                $(".swiper-container").css('display','block');
            }
            if(re=='liuyan')
            {
                $(".ditu").css('display','none');
                $(".swiper-container").css('display','none');
                $(".seven-box").css('display','block');
            }
            if(re=='ditu')
            {
                $(".seven-box").css('display','none');
                $(".swiper-container").css('display','none');
                $(".ditu").css('display','block');
            }

        }
        function hidd()
        {
            var
                $mask = $(".mask"),
                $popBox = $(".pop-box");
                $popBox.animate({top: "-300px"},function(){
                $mask.fadeOut();
            });
        }
    </script>

    <script>

        scaleW = window.innerWidth / 320;
        scaleH = window.innerHeight / 480;
        var resizes = document.querySelectorAll('.resize');
        for (var j = 0; j < resizes.length; j++) {
            resizes[j].style.width = parseInt(resizes[j].style.width) * scaleW + 'px';
            resizes[j].style.height = parseInt(resizes[j].style.height) * scaleH + 'px';
            resizes[j].style.top = parseInt(resizes[j].style.top) * scaleH + 'px';
            resizes[j].style.left = parseInt(resizes[j].style.left) * scaleW + 'px';
        }
        var mySwiper = new Swiper('.swiper-container', {
            autoplay:10000,//可选选项，自动滑动
            direction: 'vertical',
            mousewheelControl: true,
            loop: true,
            speed: 1200,
            zoom: true,
            pagination: '.swiper-pagination',
            paginationType: 'progress',
            onInit: function (swiper) {
                swiperAnimateCache(swiper);
                swiperAnimate(swiper);
            },
            onSlideChangeEnd: function (swiper) {
                swiperAnimate(swiper);
            },
            onTransitionEnd: function (swiper) {
                swiperAnimate(swiper);
            },
            onTouchStart: function (s) {
                console.log(s.activeIndex);
                if (s.activeIndex == 3) {
                    //说明将要滑动到第三章图
                    //给第三章图片加上样式
                    document.getElementById("qzinimg").className = "qzin";
                } else {
                    //移除样式
                    document.getElementById("qzinimg").className = "";
                }
            },

            watchSlidesProgress: true,

            onProgress: function (swiper) {
                for (var i = 0; i < swiper.slides.length; i++) {
                    var slide = swiper.slides[i];
                    var progress = slide.progress;
                    var translate = progress * swiper.height / 4;
                    scale = 1 - Math.min(Math.abs(progress * 0.5), 1);
                    var opacity = 1 - Math.min(Math.abs(progress / 2), 0.5);
                    slide.style.opacity = opacity;
                    es = slide.style;
                    es.webkitTransform = es.MsTransform = es.msTransform = es.MozTransform = es.OTransform = es.transform = 'translate3d(0,' + translate + 'px,-' + translate + 'px) scaleY(' + scale + ')';
                }
            },

            onSetTransition: function (swiper, speed) {
                for (var i = 0; i < swiper.slides.length; i++) {
                    es = swiper.slides[i].style;
                    es.webkitTransitionDuration = es.MsTransitionDuration = es.msTransitionDuration = es.MozTransitionDuration = es.OTransitionDuration = es.transitionDuration = speed + 'ms';

                }
            },

        })

        function  show_info(content,name,time,type){

            var $mask = $(".mask_info");
            var $box = $(".info-box");
            var $content = $("#content");
            var $user = $("#user");
            var $add_time = $("#add_time");

            var ss =new Array();
            ss[1] ='#fffb9a';
            ss[2] ='#efd3f9';
            ss[3] ='#ccf0ff';
            ss[4] ='#ffc082';
            ss[5] ='#f8d4d6';
            ss[6] ='#c7f7d5';
            $add_time.text(time);
            $user.text(name);
            $content.text(content);
            $content.css('background',ss[type]);
            $box.css('background',ss[type]);
            $box.css('display','block');
            $mask.fadeIn();
        }
        function hidd_info()
        {
            var $mask = $(".mask_info");
            var $box = $(".info-box");
            $box.css('display','none');

            $mask.fadeOut();
        }
    </script>
</body>

</html>
